﻿<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>致敬深圳抗疫英雄</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0"
    />
    <link rel="stylesheet" href="css/swiper.min.css" />
    <link rel="stylesheet" href="css/animate.min.css" />
    <script src="js/swiper.min.js"></script>
    <script src="js/swiper.animate.min.js"></script>

    <!--<link rel="stylesheet" href="/dist/css/swiper.min.css">
<link rel="stylesheet" href="/dist/css/animate.min.css">
<script src="/dist/js/swiper.min.js"></script>
<script src="/dist/js/swiper.animate.min.js"></script>-->

    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
      }
      body {
        font-family: 'microsoft yahei';
      }
      .swiper-container {
        width: 100%;
        height: 100%;
        background: #000;
      }

      .swiper-slide {
        width: 100%;
        height: 100%;
        /* background: url(./upload/bg.png) no-repeat center; */
        background-color: #D41316;
      }
      img {
        display: block;
      }
      .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        background: #fff;
        opacity: 0.4;
      }
      .swiper-pagination-bullet-active {
        opacity: 1;
      }
      @-webkit-keyframes start {
        0%,
        30% {
          opacity: 0;
          -webkit-transform: translate(0, 10px);
        }
        60% {
          opacity: 1;
          -webkit-transform: translate(0, 0);
        }
        100% {
          opacity: 0;
          -webkit-transform: translate(0, -8px);
        }
      }
      @-moz-keyframes start {
        0%,
        30% {
          opacity: 0;
          -moz-transform: translate(0, 10px);
        }
        60% {
          opacity: 1;
          -moz-transform: translate(0, 0);
        }
        100% {
          opacity: 0;
          -moz-transform: translate(0, -8px);
        }
      }
      @keyframes start {
        0%,
        30% {
          opacity: 0;
          transform: translate(0, 10px);
        }
        60% {
          opacity: 1;
          transform: translate(0, 0);
        }
        100% {
          opacity: 0;
          transform: translate(0, -8px);
        }
      }
      .ani {
        position: absolute;
      }
      .txt {
        position: absolute;
      }
      #array {
        position: absolute;
        z-index: 999;
        -webkit-animation: start 1.5s infinite ease-in-out;
      }
      .bgm-container {
        right: 10px;
        top: 10px;
        position: absolute;
        z-index: 999;
        width: 30px;
        height: 30px;
        background-image: url(./images/bgm.svg);
        background-size: contain;
      }
      .rotate {
        -webkit-animation: rotating 1.2s linear infinite;
        animation: rotating 1.2s linear infinite;
      }
      @keyframes rotating {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(1turn);
        }
      }
      .curtain{
        position: absolute;
        left: 0;
        top: -2px;
        width: 100%;
        z-index: 9;
      }
    </style>
  </head>

  <body>
    <div class="swiper-container">
      <img  class="curtain" src="./upload/curtain.png"  ></img>

      <div class="swiper-wrapper">
        <!-------------slide1----------------->
        <section class="swiper-slide swiper-slide1">
          <img class="ani resize" src="./upload/bg.png"  style="width: 320px; height: 568px; left: 0px; top: 0; z-index: 3" >
          <img
          src="upload/title.png"
          class="ani resize"
          style="width: 320px; height: 150px; left: 0px; top: 140px; z-index: 3"
          swiper-animate-effect="zoomIn"
          swiper-animate-duration="1.5s"
          swiper-animate-delay="0s"
        />
          <!-- <img
            src="upload/bonus_01.png"
            class="ani resize"
            style="width: 320px; height: 43px; left: 0px; top: 30px; z-index: 3"
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="1.5s"
            swiper-animate-delay="0s"
          /> -->
          <img
            src="./upload/date.png"
            class="ani resize"
            style="width: 115px; height: 33px; left: 103px; top: 331px; z-index: 3"
            swiper-animate-effect="fadeIn"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="1.5s"
          />
    
        </section>
        <!---------------slide2-------------->
        <section class="swiper-slide swiper-slide2">
          <img class="ani resize" src="./upload/bg2.png"  style="width: 320px; height: 568px; left: 0px; top: 0; z-index: 1" >
      
          <img
            src="./upload/text.png"
            class="ani resize"
            style="
              width: 208px;
              left: 55px;
              top: 40px;
              z-index: 2;
            "
            swiper-animate-effect="fadeIn"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="0.5s"
          />
  
        </section>
        <!-- <section class="swiper-slide swiper-slide3">
          <img
            src="upload/007.png"
            class="ani resize"
            style="width: 320px; height: 66px; left: 0px; top: 30px; z-index: 5"
            swiper-animate-effect="bounce"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/008.png"
            class="ani resize"
            style="
              width: 320px;
              height: 192px;
              left: 0px;
              top: 220px;
              z-index: 4;
            "
            swiper-animate-effect="bounceInLeft"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="1s"
          />
          <img
            src="upload/009.png"
            class="ani resize"
            style="
              width: 320px;
              height: 77px;
              left: 0px;
              top: 110px;
              z-index: 3;
            "
            swiper-animate-effect="zoomIn"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="0.5s"
          />
          <img
            src="upload/010.png"
            class="ani resize"
            style="
              width: 320px;
              height: 192px;
              left: 0px;
              top: 220px;
              z-index: 2;
            "
            swiper-animate-effect="bounceInRight"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="1.5s"
          />
        </section>
        <section class="swiper-slide swiper-slide4">
          <img
            src="upload/001.jpg"
            class="ani resize"
            style="width: 320px; height: 46px; left: 0; top: 20px; z-index: 2"
            swiper-animate-effect="fadeInDown"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="0s"
          />
          <img
            src="upload/002.jpg"
            class="ani resize"
            style="
              width: 320px;
              height: 327px;
              left: 0px;
              top: 100px;
              z-index: 1;
            "
            swiper-animate-effect="zoomInLeft"
            swiper-animate-duration="0.5s"
            swiper-animate-delay="0.5s"
          />
        </section> -->
      </div>

      <img
        src="./images/arrow.png"
        style="width: 20px; height: 15px; top: 460px; left: 150px"
        id="array"
        class="resize"
      />
      <!-- <div class="swiper-pagination"></div> -->
      <div class="bgm-container" onclick="toggleAudio()">
        <!-- <audio src="./bgm3.mp3" loop="loop" autoplay="autoplay"></audio> -->
        <audio src="./audio/lwh-ky.mp3" loop="loop"></audio>
      </div>
    </div>

    <script>
      scaleW = window.innerWidth / 320
      scaleH = window.innerHeight / 568
      var resizes = document.querySelectorAll('.resize')
      for (var j = 0; j < resizes.length; j++) {
        resizes[j].style.width =
          parseInt(resizes[j].style.width) * scaleW + 'px'
        resizes[j].style.height =
          parseInt(resizes[j].style.height) * scaleH + 'px'
        resizes[j].style.top = parseInt(resizes[j].style.top) * scaleH + 'px'
        resizes[j].style.left = parseInt(resizes[j].style.left) * scaleW + 'px'
      }

      var mySwiper = new Swiper('.swiper-container', {
        direction: 'vertical',
        pagination: '.swiper-pagination',
        //virtualTranslate : true,
        mousewheelControl: true,
        onInit: function (swiper) {
          swiperAnimateCache(swiper)
          swiperAnimate(swiper)
        },
        onSlideChangeEnd: function (swiper) {
          swiperAnimate(swiper)
        },
        onTransitionEnd: function (swiper) {
          swiperAnimate(swiper)
        },

        watchSlidesProgress: true,

        onProgress: function (swiper) {
          for (var i = 0; i < swiper.slides.length; i++) {
            var slide = swiper.slides[i]
            var progress = slide.progress
            var translate = (progress * swiper.height) / 4
            scale = 1 - Math.min(Math.abs(progress * 0.5), 1)
            var opacity = 1 - Math.min(Math.abs(progress / 2), 0.5)
            slide.style.opacity = opacity
            es = slide.style
            es.webkitTransform = es.MsTransform = es.msTransform = es.MozTransform = es.OTransform = es.transform =
              'translate3d(0,' +
              translate +
              'px,-' +
              translate +
              'px) scaleY(' +
              scale +
              ')'
          }
        },

        onSetTransition: function (swiper, speed) {
          for (var i = 0; i < swiper.slides.length; i++) {
            es = swiper.slides[i].style
            es.webkitTransitionDuration = es.MsTransitionDuration = es.msTransitionDuration = es.MozTransitionDuration = es.OTransitionDuration = es.transitionDuration =
              speed + 'ms'
          }
        },
      })

      // BGM
      var audio = document.querySelector('audio')

      var bgnContainer = document.querySelector('.bgm-container')

      function toggleAudio() {
        if (audio.paused) {
          audio.play()
          bgnContainer.className += ' rotate'
        } else {
          audio.pause()
          bgnContainer.className = bgnContainer.className.replace(/rotate/g, '')
        }
      }
      // var name =location.search.split('=')[1]
    </script>
  </body>
</html>
